<template>
	<div class="search">
		<van-nav-bar left-arrow @click-left="$router.back('/')">
			<template #title>
				<van-search v-model="key_word" show-action placeholder="请输入搜索关键词" @search="onSearch" @input="input">
					<template #action>
						<div @click="onSearch(key_word)">搜索</div>
					</template>
				</van-search>
			</template>
		</van-nav-bar>
		<div class="resultList" v-show="resultList.length>=0">
			<van-cell v-for="item in resultList" @click="onSearch(item.title)">
				{{item.title}}
			</van-cell>
		</div>
		<div class="resultList01">
			<br>
			<span>大家都在搜索...</span>
			<ul>
				<li>
					奸商进的成神之路...
				</li>
				<li>
					3522素质鲁的传奇...
				</li>
			</ul>
		</div>
		<div v-show="resultList.length===0" class="resultList02">
			<div>历史记录</div>

			<van-cell v-for="item in search_history" @click="onSearch(item.value)">
				{{item.value}}
			</van-cell>

			<p @click="clear" v-if="search_history.length>0">清除历史</p>
		</div>
	</div>
</template>

<script>
	import {
		search
	} from '@/api/search';
	let timer = null;
	export default {
		name: 'SearchView',
		data() {
			return {
				key_word: '',
				resultList: [],
				search_history: []
			}
		},
		created() {
			let search_history = localStorage.getItem('search_history');
			if (search_history) {
				this.search_history = JSON.parse(search_history)
			}
		},
		methods: {
			clear() {
				localStorage.removeItem('search_history')
				this.search_history = []
			},
			onSearch(key_word) {

				let index = this.search_history.findIndex(V => V.value === key_word)
				if (index >= 0) {
					this.search_history.splice(index, 1)
				}

				this.search_history.unshift({
					value: key_word,
					timestamp: +new Date()
				})

				localStorage.setItem('search_history', JSON.stringify(this.search_history))

				this.$router.push('/detail?key_word=' + key_word)
			},
			input(key_word) {

				key_word = key_word.trim();
				if (key_word.length === 0) {
					this.resultList = []
					return
				};

				if (timer) {
					clearTimeout(timer)
					timer = null
					if (key_word.length === 0) {
						this.resultList = []
						return
					};
				}
				timer = setTimeout(v => {
					search({
						key_word
					}).then(res => {
						console.log(res)
						this.resultList = res.data
					})
				}, 300)

			}
		},

		mounted() {

		},
	}
</script>

<style lang="scss" scoped>
	.search {
		background-color: #f4f4f4;
		height: 100vh;
	}

	.search ::v-deep .van-nav-bar__title {
		max-width: 100%;
		width: calc(100% - 50px);
	}

	.van-search {
		padding: 0;
		padding-left: 15px;
	}

	.resultList {
		width: 100%;
		position: fixed;
		top: 50px;
		left: 0;
		background-color: #fff;
	}

	.resultList01 {
		width: 100%;
		height: 30vh;
		background-color: #fff;
		margin-bottom: 20px;
	}

	.resultList01 span {
		margin-left: 10px;
		padding: 5px;
		background-color: #f4f4f4;
		border-radius: 20px;
	}
	.resultList01 ul{
		padding: 15px;
	}
	.resultList01 ul li {
		line-height: 40px;
		border-bottom: 1px solid #f4f4f4;
	}

	.resultList02 {
		width: 100%;
		height: 61.4vh;
		background-color: #fff;
	}

	.resultList02 div {
		padding-top: 10px;
		padding-left: 10px;
	}

	.resultList02 p {
		text-align: center;
		color: #ccc;
	}
</style>
